<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>书评网查询</title>
    <!-- 引入样式-->
    <link href="../imgs/2.jpeg" type="image/x-icon" rel="icon">
    <link rel="stylesheet" href="../js/element-ui/index.css">
    <!-- 引入js-->
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/http.js"></script>
    <script src="../js/element-ui/index.js"></script>
    <style>
        body{
            background:#f2f6fc;
        }
        label{
            background: skyblue;
            color: white;
            font-size: large;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div id="app">
    <div v-for="(bookName,index) in likeBooks" id="d1">
        <br>
        <label v-if="bookName!=null">{{index+1}}.{{bookName}}</label>
    </div>

    <br><br><br><br><br><br><br><br><br><br>
    <div v-for="(bookReview,index) in bookReviews" id="d2">
        <label>{{index+1}}.</label>
        <label>书名:{{bookReview.bookName}}</label>
        <label>昵称:{{bookReview.nickName}}</label>
        <label>评分:{{bookReview.score}}</label>
        <label>评价:{{bookReview.review}}</label>
        <label>发布时间:{{bookReview.time}}</label><br>
    </div>
</div>


<script>
let vue=new Vue({
    el:"#app",
    data:{
        likeBooks:[],
        bookReviews:[],
    },
    created(){
        let url = window.location.href.toString();
        let isParams = url.split("?")[1];
        if (isParams==null){
            document.getElementById("d2").style.display="none"
            this.getLikeBooks();
        }else {
            let params = isParams.split("&");
            for (let param of params) {
                let strings = param.split("=");
                if (strings[0]=="bookName"){
                    document.getElementById("d1").style.display="none"
                    this.queryByBookName(strings[1]);
                    break;
                }
            }
        }
    },
    methods:{
        queryByBookName(bookName){
            http.get("/bookReview/queryByBookName?bookName="+bookName).then(res=>{
                this.bookReviews=res.data;
                this.$message.success(res.message);
            });
        },
        getLikeBooks(){
            http.get("/bookReview/getLikeBooks").then(res=>{
                this.likeBooks=res.data;
                this.$message.success("这是大家的喜欢的书");
            });
        }
    }
});
</script>
</body>
</html>